<template>
  <div class="fundsTransfer">
    <ul class="query">
      <li class="query-option">
        <span>资金变动时间：</span>
        <el-date-picker type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" @change="changeDate" v-model="date" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" size="medium">
        </el-date-picker>
      </li>
      <li class="query-option">
        <span>预存款状态：</span>
        <el-select size="medium" v-model="queryData.type">
          <el-option value="" label='全部'></el-option>
          <el-option :value="1" label='预存款充值'></el-option>
          <el-option :value="2" label='预存款提现'></el-option>
        </el-select>
      </li>
      <li class="query-option">
        <el-button size="medium" type="primary" @click="getTableData">查询</el-button>
        <el-button size="medium" type="warning" @click="exportExcel">导出</el-button>
      </li>
    </ul>
    <ul class="account">
      <li class="account-option">预存款总金额：{{countData.zczje}}</li>
      <li class="account-option">出账总金额：{{countData.ztxje}}</li>
      <li class="account-option">剩余预存款金额：{{countData.syyckje}}</li>
      <li class="account-option">
        <el-button size="medium" type="primary" @click="showDepositDialog(1)">充值预存款</el-button>
        <el-button size="medium" type="primary" @click="showDepositDialog(2)">提现预存款</el-button>
      </li>
    </ul>
    <div class="table-wrapper">
      <el-table :data="tableData" stripe highlight-current-row border>
        <el-table-column align="center" type="index" label="序号" width="100">
        </el-table-column>
        <el-table-column align="center" prop="createTime" label="时间">
        </el-table-column>
        <el-table-column align="center" prop="tranDesc" label="说明">
        </el-table-column>
        <el-table-column align="center" prop="inAccount" label="入账（元）">
        </el-table-column>
        <el-table-column align="center" prop="outAccount" label="出账（元）">
        </el-table-column>
        <el-table-column align="center" prop="status" label="状态">
          <template slot-scope="scope">
            <span :class="{'blue':scope.row.status==3 || scope.row.status ==7}" @click="showReasonDialog(scope.row.status,scope.row.reason)">{{scope.row.status==0?'充值成功':scope.row.status==1?'提现申请中':scope.row.status==2?'提现成功':scope.row.status==3?'提现驳回':scope.row.status==4?'处理中':scope.row.status==5?'已扣款':scope.row.status==6?'已收款':'充值驳回'}}</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination v-show='page.total>page.pageSize' background layout="total,prev, pager, next,jumper" :page-size="page.pageSize" :total="page.total" :current-page="page.current" @current-change="handleCurrentChange">
      </el-pagination>
    </div>
    <el-dialog :title="deposit.type===1?'充值预存款':'提现预存款'" width="25%" :visible.sync="deposit.show">
      <ul class="dialog-list">
        <li class="dialog-item">
          <span>金额：</span>
          <el-input size="small" v-model="deposit.num" placeholder="请输入金额"></el-input>
          <span>元</span>
        </li>
      </ul>
      <div slot="footer">
        <el-button type="primary" @click="depositSubmit" size="medium">{{deposit.type===1?'充值':'提现'}}</el-button>
        <el-button @click="deposit.show = false" size="medium">关闭</el-button>
      </div>
    </el-dialog>
    <el-dialog title="驳回原因" width="25%" :visible.sync="reasonDialog.show">
      <p style="font-size:16px;">{{reasonDialog.reason}}</p>
      <div slot="footer">
        <el-button @click="reasonDialog.show = false" size="medium">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      date: [],
      exportData:{},
      queryData: {
        type: "",
        startTime: "",
        endTime: ""
      },
      countData: {},
      tableData: [],
      page: {
        total: 0,
        pageSize: 10,
        current: 1
      },
      deposit: {
        type: null,
        show: false,
        num: ""
      },
      reasonDialog: {
        show: false,
        reason: '',
      }
    };
  },
  mounted() {
    this.getCountData();
    this.getTableData();
  },
  methods: {
    async getTableData() {
      let { data } = await this.$post({
        api: "/cash/getAccountTransferList",
        data: {
          pageSize: this.page.pageSize,
          current: this.page.current,
          startTime: this.queryData.startTime,
          endTime: this.queryData.endTime,
          type: this.queryData.type
        }
      });
      if (data.code === 0) {
        this.tableData = data.data;
        this.page.total = data.rdPage.total;
        this.exportData = Object.assign({}, this.queryData);
      } else {
        this.$message({
          type: "error",
          message: data.msg
        });
      }
    },
    async getCountData() {
      let { data } = await this.$post({
        api: "/cash/count"
      });
      if (data.code === 0) {
        this.countData = data.data;
      } else {
        this.$message({
          type: "error",
          message: data.msg
        });
      }
    },
    changeDate(val) {
      if (val) {
        this.queryData.startTime = val[0];
        this.queryData.endTime = val[1];
      } else {
        this.queryData.startTime = "";
        this.queryData.endTime = "";
      }
    },
    exportExcel() {
      if (!this.tableData.length) {
        this.$message({
          type: 'error',
          message: '不能导出数据为空的excel'
        });
      } else {
        this.$confirm('确认进行导出操作吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$post({
            api: '/cash/importAccountTransferList',
            data: this.exportData
          }).then(({ data }) => {
            if (data.code === 0) {
              let link = document.createElement('a');
              link.href = url + data.data.replace('static/', '');
              link.download = 'order';
              link.click();
            } else {
              this.$message({
                type: 'error',
                message: data.msg
              });
            }
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });
        });
      }
    },
    handleCurrentChange(val) {
      this.page.current = val;
      this.getTableData();
    },
    showDepositDialog(type) {
      this.deposit.type = type;
      this.deposit.show = true;
    },
    async depositSubmit() {
      let link = this.deposit.type == 1 ? "/cash/topup" : "/cash/deposit";
      if (!/^[0-9].*$/.test(this.deposit.num)) {
        this.$message({
          type: "error",
          message: "请输入正确的金额！"
        });
      } else {
        let { data } = await this.$post({
          api: link,
          data: {
            num: this.deposit.num
          }
        });
        if (data.code === 0) {
          this.deposit = { show: false, type: null, num: "" };
          this.getTableData();
        } else {
          this.$message({
            type: "error",
            message: data.msg
          });
        }
      }
    },
    showReasonDialog(status, reason) {
      if (status == 3 || status == 7) {
        this.reasonDialog.show = true;
        this.reasonDialog.reason = reason;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.query,
.account {
  overflow: hidden;
  padding: 15px 30px;
  &-option {
    float: left;
    margin-right: 50px;
    line-height: 30px;
    min-width: 250px;
    &:last-child {
      margin-right: 0;
    }
  }
  .el-input {
    width: 300px;
  }
}
.account {
  font-size: 16px;
  border-top: 10px solid #f5f8fb;
  border-bottom: 10px solid #f5f8fb;
}
.table-wrapper {
  padding: 0 15px;
}

.dialog-item {
  .el-input {
    display: inline-block;
    width: 75%;
  }
  span {
    margin: 0 5px;
  }
}
.blue {
  color: #0033ff;
  cursor: pointer;
}
</style>
